<style lang="scss" scoped>
.photo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 5px;
  width: 100%;
  height: 200px;
  overflow: hidden;

  .left-container {
    margin-right: 5px;
    margin-bottom: 10px;
    width: 50%;
    height: 100%;
  }
  .right-container {
    width: 50%;
    height: 100%;
  }
}
.img-box-large {
  box-sizing: border-box;

  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 10px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.img-box {
  box-sizing: border-box;
  padding-bottom: 5px;
  width: 100%;
  height: 50%;

  // overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.img-box:last-child {
  padding-bottom: 0px;
}
.title {
  color: #000000d9;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Open Sans';
}
</style>
<template>
  <el-col :span="24">
    <el-card>
      <div class="photo-container">
        <div class="left-container">
          <div class="img-box-large">
            <img :src="img_list[0]" alt="" />
          </div>
        </div>
        <div class="right-container">
          <div class="img-box">
            <img :src="img_list[1]" alt="" />
          </div>
          <div class="img-box">
            <img :src="img_list[2]" alt="" />
          </div>
        </div>
      </div>

      <div class="title">留住这一刻</div>
    </el-card>
  </el-col>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import request from '../../../utils/axios';

// 拿到父组件传回的参数,每请求一次页面数就加一
const props = defineProps(['index']);
let final_arr = reactive([]);

let img_list = reactive([]);

onMounted(() => {
  console.log(props);
  request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1371,
    },
  }).then((res) => {
    // 对后端传回来的数据做处理
    let data = res.data.Carousels;
    let list = [];
    data.forEach((item) => {
      list.push(item);
    });
    final_arr = list.slice(props.index * 3, props.index * 3 + 3);
    final_arr.forEach((item) => {
      img_list.push(item.url);
    });
    console.log(img_list);
  });
});
</script>
